<template>
  <view>
    <view class="title">—— 会员功能 ——</view>
    <!-- #ifdef MP-WEIXIN -->
    <nav class="tab">
      <view
        class="tab-item"
        v-for="item in tab"
        :key="item.id"
        @click="toDeail(item.link)"
      >
        <text class="icon" :class="'cuIcon-' + item.icon"></text>
        <span class="cuIcon-profile"></span>
        <text class="name">{{ item.name }}</text>
      </view>
    </nav>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      tab: [
        {
          id: 1,
          name: '个人资料',
          icon: 'profile',
          link: 'personal-data'
        },
        {
          id: 2,
          name: '会员权益',
          icon: 'crown',
          link: 'membership-rights'
        },
        {
          id: 3,
          name: '客服中心',
          icon: 'servicefill',
          link: 'customer-service'
        },
        {
          id: 4,
          name: '我的关注',
          icon: 'like',
          link: 'my-attention'
        },
        {
          id: 5,
          name: '订单记录',
          icon: 'newshotfill',
          link: 'order-records'
        },
        {
          id: 6,
          name: '设计师认证',
          icon: 'check',
          link: 'designer'
        }
      ]
    }
  },
  methods: {
    toDeail(link) {
      uni.navigateTo({
        url: `/pages/package/member-center/component/${link}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
}
.tab {
  display: flex;
  flex-wrap: wrap;
  margin-top: 60rpx;
  .tab-item {
    width: 33%;
    height: 140rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .icon {
      font-size: 52rpx;
      margin: 10rpx 0 16rpx 0;
      color: #eb5948;
    }
    .name {
      font-size: 26rpx;
    }
  }
}
</style>
